<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <title> JVM监控配置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/monitor.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<blockquote class="layui-elem-quote layui-text font16">
    CPU 监控配置
</blockquote>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md6 layui-bg-gray">
           <div id="gaugeChart" style="min-height: 500px;"></div>
        </div>
        <div class="layui-col-md6 layui-bg-gray">
            <div id="gcChart" style="min-height: 500px;"></div>
        </div>
    </div>
</div>
<script src="js/jquery-3.4.0.min.js" charset="utf-8"></script>
<script src="js/echarts.min.js"></script>
<script src="js/monitor.js" charset="utf-8"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/javascript"  >
$(function () {
    // 实时监控CPU
    initCpuChart();
    initGcChart();
})

/**
 * CPU实时监控图
 */
function  initCpuChart() {
    var gaugeChartDom = document.getElementById("gaugeChart");
    var  option = {
        title: {
            text: 'JAVA进程CPU使用率'
        },
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: 'cpu使用率',
                type: 'gauge',
                detail: {formatter: '{value}%'},
                data: [{value: 50, name: 'CPU'}]
            }
        ]
    };
    var myChart = echarts.init(gaugeChartDom);
    myChart.setOption(option);
    var url = "v1/api/monitor/cpu.json"
    setInterval(function () {
        _ajax(url,function (data) {
            option.series[0].data[0].value = data.toFixed(2);
            myChart.setOption(option, true);
        })
    },1000);
}

/**
 *  初始GC域
 */
function  initGcChart() {
    var gcChartDom = document.getElementById("gcChart");
    var option = {
        title: {
            text: 'GC各内存使用率'
        },
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        xAxis: {
            type: 'category',
            data: ['PS_Eden_Space', 'PS_Survivor_Space', 'PS_Old_Gen']
        },
        yAxis: {
            type: 'value',
            min:0,
            max:100
        },
        series: [{
            data: [100, 100, 100],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
            }
        }]
    };

    var gcChart = echarts.init(gcChartDom);
    gcChart.setOption(option);
    var url = "v1/api/monitor/memory.json"
    setInterval(function () {
        _ajax(url,function (data) {
            var PS_Eden_Space = 0;
            var PS_Survivor_Space = 0;
            var PS_Old_Gen = 0;
            for(var i=0,len=data.length;i<len;i++){
                var item = data[i];
                if("PS Eden Space" === item.name){
                    PS_Eden_Space = item.used / item.total*1.0 ;
                }else if("PS Survivor Space" === item.name){
                    PS_Survivor_Space = item.used / item.total*1.0;
                }else if("PS Old Gen" === item.name){
                    PS_Old_Gen = item.used / item.total*1.0;
                }
            }
            PS_Eden_Space = PS_Eden_Space * 100;
            PS_Survivor_Space = PS_Survivor_Space *100;
            PS_Old_Gen = PS_Old_Gen *100;
            option.series[0].data = [PS_Eden_Space.toFixed(1) ,PS_Survivor_Space.toFixed(1),PS_Old_Gen.toFixed(1)];
            gcChart.setOption(option, true);
        })
    },1000);
}
</script>
</body>
</html>